<template>
  <div class="myContainer">
    <!-- 头部标题 start -->  
    <el-row class="myBorderBottom">
      <el-col :span="7" class="myTitleText myLineHeight_40px">
        {{title}}
      </el-col>
      <el-col :span="17" class="myTextAlignRight">
        <!-- <el-button type="primary" class="myBgGreen" @click="add">新增</el-button> -->
      </el-col>
    </el-row>
    <!-- 头部标题 end -->
    <el-row :gutter="10" class="myPaddingTop_10px">
      <el-col :span="6">
        <template>
          <el-cascader
            placeholder="全部项目/小区"
            :options="regionOptions"
            v-model="regionOptSelected">
          </el-cascader>
        </template>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="time"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" @click="search">查询</el-button>
      </el-col>
    </el-row>
    
    <el-row class="myPaddingTop_10px">
      <el-col :span="24">
        <template>
          <el-table
            border
            :data="list"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="状态">
              <template scope="scope">
                {{scope.row.repair_status | repair_status}}
              </template>
            </el-table-column>
            <el-table-column
              label="维修单号"
              prop="repair_order">
            </el-table-column>
            <el-table-column
              label="业务时间"
              prop="repair_time">
              <template scope="scope">
                <span>{{scope.row.repair_time | getTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="处理人"
              prop="repair_handler">
            </el-table-column>
            <el-table-column
              label="报修人"
              prop="repair_user">
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="功能操作"
              width="100">
              <template scope="scope">
                <el-button class="look" type="text" size="small" @click="info(scope.row.property_id,scope.row.repair_id)">详情</el-button>
                <span v-if="scope.row.repair_status==0"> 
                  | <el-button class="look" type="text" size="small" @click="update(scope.row.property_id,scope.row.repair_id)">编辑</el-button>
                </span>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
    
    <div class="block">                    
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page_num"
        :page-sizes="[10, 15]"
        :page-size="page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 维修信息弹出框 start -->
    <el-dialog title="维修信息登记" :visible.sync="RepairDig" :before-close="handleClose" class="mydlg">

      <el-dialog title="选择报修人" class="myRoleDialog" :visible.sync="newRoleDialogVisible" append-to-body>
        <el-row :gutter="10">
          <el-col :span="20">
            <el-input placeholder="输入关键词" v-model="kw"></el-input>
          </el-col>
          <el-col :span="4" class="myTextAlignRight">
            <el-button type="primary" class="myBgGreen" @click="onSearch">查询</el-button>
          </el-col>
        </el-row>
        <div class="mymarginTop_10px">
          <el-tree
            class="myOV_y_400px" 
            ref="dutyDlg"
            v-loading="dutyDlgListLoading"
            :data="dutyDlgList"
            :props="dutyDlgProps"
            node-key="staff_id"
            @check-change="onChange"
            :render-content="renderContent"
            show-checkbox>
          </el-tree>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="newRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" class="myBgGreen" @click="onAssignSub">确 定</el-button>
        </div>
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <table class="RepairDigTab">
            <tr>
              <td>维修单号</td>
              <td>
                <el-input placeholder="维修单号" v-model="repair_order" :disabled="isreadonly"></el-input>
              </td>
              <td>业务日期</td>
              <td>
                <el-date-picker
                  v-model="repair_time"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :disabled="isreadonly"
                  placeholder="业务日期">
                </el-date-picker>
              </td>
            </tr>
            <tr>
              <td>处理人</td>
              <td>
                <el-input placeholder="处理人" v-model="repair_handler" readonly></el-input>
              </td>
              <td>维修花费</td>
              <td>
                <el-input placeholder="维修花费" v-model="repair_cost" :disabled="isreadonly"></el-input>
              </td>
            </tr>
            <tr>
              <td>状态</td>
              <td>
                <template>
                  <el-select v-model="repair_status" placeholder="状态" :disabled="isreadonly">
                    <el-option
                      v-for="item in repairStateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </template>
              </td>
              <td>报修人</td>
              <td>
                <el-input placeholder="报修人" v-model="repair_user" @focus="showRepairDig" :disabled="isreadonly"></el-input>
              </td>
            </tr>
            <tr>
              <td>维修内容</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="维修内容" v-model="repair_content" :disabled="isreadonly"></el-input>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="3">
                <el-input type="textarea" placeholder="备注" v-model="repair_note" :disabled="isreadonly"></el-input>
              </td>
            </tr>
          </table>
        </el-col>
      </el-row>
      <el-row class="myPaddingTop_10px">
        <template>
          <el-table
            border
            :data="list_wx"
            :stripe = true
            v-loading="loading"
            style="width: 100%">
            <el-table-column
              label="照片">
              <template scope="scope">
                <a v-for="i in scope.row.arr_url" :href='QINIU_API + i.att_url' target="_blank">
                  <img :src="QINIU_API + i.att_url" width="40" height="40" />
                </a>
              </template>
            </el-table-column>
            <el-table-column
              label="资产条码"
              prop="property_code">
            </el-table-column>
            <el-table-column
              label="资产名称"
              prop="property_name">
            </el-table-column>
            <el-table-column
              label="资产类别"
              prop="cate_name">
            </el-table-column>
            <el-table-column
              label="规格型号"
              prop="property_spec">
            </el-table-column>
            <el-table-column
              label="存放位置"
              prop="property_loc">
            </el-table-column>
            <el-table-column
              label="使用部门"
              prop="dept_name">
            </el-table-column>
            <el-table-column
              label="使用人"
              prop="user_name">
            </el-table-column>
            <el-table-column
              label="质保状态">
              <template scope="scope">
                {{scope.row.out_warranty | out_warranty}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onaddRepair" v-if="repair_id!=''">提 交</el-button>
        <el-button @click="RepairDig = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 维修信息弹出框 end -->

  </div>
</template>     
  
<style scoped>
  .myBorderBottom{
    border-bottom:1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleText{
    font-weight: 500;
    font-size: 16px;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }  
  .myred{
    color: #f00;
    font-size: 12px;
  }
  .myMarginBottom_10px{
    margin-bottom: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
  }
  .RepairDigTab{
    width: 100%;
    border: 1px solid #e6ebf5;
    padding: 0;
    border-spacing: 0;
    border-collapse: collapse;
  }
  .RepairDigTab tr,.RepairDigTab td{
    border: 1px solid #e6ebf5;
  }
  .RepairDigTab td{
    width: 25%;
    height: 40px;
  }
  .myOV_y_400px{
    max-height: 400px;
    min-height: 200px;
    overflow-y:scroll;
    border:1px solid #f2f2f2;
  }
  .mymarginTop_10px{
    margin-top: 10px;
  }
</style>

<script>
  import { extractAreaIds } from '@/utils/misc';
  import { getRegion } from '@/utils/localstorage';
  import { QINIU_API } from '@/config/baseUrl';
  import { getRepairList , getAssetsDetail , getRepair , updateRepair } from "@/api/assets";
  import { getStaffList } from '@/api/staff';
  export default {
    data(){
      return{
        title:"维修信息登记",
        page_num:1,
        page_size:10,
        total:null,
        list:[],
        loading:false,
        regionOptions: [],
        regionOptSelected: [],
        RepairDig:false,
        datePicker:"",
        repairStateValue:"",
        repairStateOptions:[
          { label:"维修中", value:0},
          { label:"已完成", value:1}
        ],
        time:[],
        QINIU_API:QINIU_API,

        list_wx:[],
        repair_order:"",
        repair_handler:"",
        repair_handler_id:"",
        repair_user:"",
        repair_user_id:"",
        repair_cost:"",
        repair_content:"",
        repair_note:"",
        repair_status:"",
        repair_time:"",
        property_id:"",
        repair_id:"",

        dutyDlgList:[],
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        dutyDlgListLoading:false,
        kw:"",
        newRoleDialogVisible:false,

        isreadonly:false,

      }
    },
    components: {

    },
    created(){
      document.title=this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);

      this.ongetRepairList();

    },
    computed: {
      areaIds() {
        return extractAreaIds(this.regionOptSelected, this.regionOptions);
      }
    },
    filters:{
      repair_status(val){
        let type={
          "0":"维修中",
          "1":"已完成"
        }
        return type[val];
      },
      out_warranty(val){
        let type={
          "0":"未过期",
          "1":"过期"
        }
        return type[val];
      },
      getTime(val){
        return val?val.split(' ')[0]:'';
      }
    },
    watch: {
      
    },
    methods:{
      handleSizeChange(val) {//每页条数控制
        this.page_size = val;
        this.ongetRepairList();
      },
      handleCurrentChange(val) {//每页
        this.page_num = val;
        this.ongetRepairList();
      },
      info(id,repair_id){
        let vm=this;
        vm.repair_id='';
        vm.isreadonly=true;
        vm.ongetRepair(repair_id);
        vm.ongetAssetsDetail(id);
        vm.RepairDig=true;
      },
      update(id,repair_id){
        let vm=this;
        vm.repair_id=repair_id;
        vm.isreadonly=false;
        vm.ongetRepair(repair_id);
        vm.ongetAssetsDetail(id);
        vm.RepairDig=true;
        setTimeout(function(){
          let userInfo=JSON.parse(window.localStorage.getItem("userInfo"));
          vm.repair_handler=userInfo.user_name;
          vm.repair_handler_id=userInfo.user_id;
        },100);
      },
      search(){
        this.ongetRepairList();
      },
      ongetRepairList(){
        let vm=this;
        let params={
          area_id:vm.areaIds,
          start_time:vm.time?vm.time[0]:'',
          end_time:vm.time?vm.time[1]:'',
          page_num:vm.page_num,
          page_size:vm.page_size
        }
        vm.loading=true;
        getRepairList(params).then(response =>{
          let res=response.data;
          vm.list=res.rows;
          vm.page_size=res.page_size;
          vm.page_num=vm.page_num;
          vm.total=res.total;
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
          vm.$message.error("拉取维修登记列表失败！"+error.response.data.error_msg);
        })
      },
      onaddRepair(){
        let vm=this;
        let params={
          "property_id": vm.property_id,
          "repair_order": vm.repair_order,
          "repair_status": vm.repair_status,
          "repair_time": vm.repair_time,
          "repair_handler": vm.repair_handler,
          "repair_handler_id": vm.repair_handler_id,
          "repair_user": vm.repair_user,
          "repair_user_id": vm.repair_user_id,
          "repair_cost": Number(vm.repair_cost),
          "repair_content": vm.repair_content,
          "repair_note": vm.repair_note
        }
        updateRepair(vm.repair_id,params).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetRepairList();
          vm.repair_id="";
          vm.RepairDig=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      ongetAssetsDetail(id){
        let vm=this;
        getAssetsDetail(id).then(response => {
          let res=response.data;
          vm.$set(vm.list_wx,0,res);
        }).catch(error => {
          vm.list_wx=[];
          vm.$message.error("拉取资产详细失败！" + error.response.data.error_msg);
        })
      },
      ongetRepair(id){
        let vm=this;
        getRepair(id).then(response => {
          let res=response.data;
          vm.property_id=res.property_id,
          vm.repair_order=res.repair_order,
          vm.repair_status=res.repair_status,
          vm.repair_time=res.repair_time,
          vm.repair_handler=res.repair_handler,
          vm.repair_user=res.repair_user,
          vm.repair_cost=res.repair_cost,
          vm.repair_content=res.repair_content,
          vm.repair_note=res.repair_note
        }).catch(error => {
          vm.$message.error("拉取维修信息详细失败！"+error.response.data.error_msg);
        })
      },
      handleClose(done) {
        return;
      },
      fetchStaff() {//获取人员列表
        let vm = this;
        this.dutyDlgListLoading = true;
        let params = {
          kw:vm.kw,
          is_fuzzy:true,
          page_num: 1,
          page_size: 10000,
          ril: 'S',
          area_id:vm.areaIds,
        };
        getStaffList(params)
        .then(response => {
          vm.dutyDlgList = response.data.rows;
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this;
        if(b){
          vm.$refs.dutyDlg.setCheckedKeys([]);
          vm.$refs.dutyDlg.setCheckedKeys([a.staff_id]);
        }else{
          vm.$refs.dutyDlg.setCheckedKeys([]);
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
              title:`联系方式：${node.data.phone}`
            }
          },
          [
            createElement('span', node.label),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.dept_name}`
            )
          ]
        );
      },
      showRepairDig(){
        this.newRoleDialogVisible=true;
        this.fetchStaff();
      },
      onAssignSub(){//确认报修人
        let vm=this;
        var duty = vm.$refs.dutyDlg.getCheckedNodes();
        if (duty.length > 0) {
          vm.repair_user = duty[0].user_name;
          vm.repair_user_id = duty[0].staff_id;
        }else{
          vm.repair_user = '';
          vm.repair_user_id = '';
        }    
        vm.newRoleDialogVisible = false;
      },
      onSearch(){
        this.fetchStaff();
      },
    }
}
</script>

